
{% extends "layout.html" %}
{% block content %}





<!--js填充处-->






<div id="context">

<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
    <div class="container">
    
      <h4 class="display-4">欢迎访问<br>上外贸定制版 FISCO BCOS 工具箱！</h4>
    
      <p>使用图形化的方式调用 FISCO BCOS Python-SDK，除此之外还有多个FISCO BCOS 开发相关功能</p>
      <p><a href="https://github.com/SUIBE-Blockchain/fisco_bcos_toolbox" class="btn btn-primary btn-large">查看 Github 源码……</a></p>
    </div>
</div><!-- /.jumbotron -->



<div class="container">
  <div class="row">
    <div class="col-lg-8">
      <a class="no_type_a" target="_blank" data-tooltip="点击查看 API 文档" href="https://github.com/SUIBE-Blockchain/FISCO_BCOS_Toolbox/wiki/%E6%8E%A5%E5%8F%A3-v1.0#1-generate-address"><h3><i class="fa fa-angellist"></i>生成测试用私钥与地址</h3></a>
      <br>
      <p>
          <label class="control-label">选择你要生成的密钥类型：</label>
        <br>
          <div class="selectContainer">
            <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
              <select  v-model="key_type" v-on:change="change_key_type(key_type)"  name="select-key-type" class="form-control selectpicker" >
                {% for item in key_type %}
                  <option value={{item}}>{{item}}</option>
                {% endfor %}
              </select>
            </div>
          </div>
          <br>
        <a class="btn btn-outline-secondary" v-on:click="get_addr(key_type)">Generate!</a>
        <a class="btn btn-outline-secondary" v-on:click="get_addr_by_priv(priv,key_type)">Generate by Privkey!</a>
        <!-- <a class="btn btn-outline-secondary" id="expressArea" href="javascript:void(0)"> -->
        <a class="btn btn-outline-secondary" id="expressArea" v-on:click="show_addr_and_priv()">
          显示已生成的地址私钥
        </a>
        <a class="btn btn-outline-secondary" id="txt_download" v-on:click="download_txt(priv, addr)">
          下载为txt文件
        </a>

        <br><br>

      <div id="areaLayer" class="express-area-box" ref="area_box">
      <article id="areaBox">
        <ul class="addr_list" id="addr_list">
          <br><br><br>
          <div v-for="key in keys">
          <li class="list" >
            Privkey: ${key.priv}
          </li>
          <li class="list" >
            Address: ${key.addr}
          </li>
          <a class="btn btn-outline-secondary" id="txt_download" v-on:click="download_txt(key.priv, key.addr)">
            下载为txt文件
          </a>
          </div>
          <li class="list" >
            Privkey: <input type="text" v-model="priv_adding" class="form-control" placeholder="Priv" aria-label="Priv" aria-describedby="basic-addon1">

          <li class="list" >
            Address:<input type="text" v-model="addr_adding" class="form-control" placeholder="Addr" aria-label="Addr" aria-describedby="basic-addon1">

          </li>
        </ul>
        <button class="btn-danger" style="margin-left: 10%" v-on:click="btn_clear()">一键清除缓存数据</button>
        <button class="btn-info" v-on:click="btn_add_keys()">手动添加新数据</button>
        <ul id="areaList" class="area-list" style="margin-bottom: 500px;"></ul>
      </article>
      </div>
      <!--遮罩层-->
      <transition name="fade">
        <div id="areaMask" class="mask" ref="mask" v-on:click="close_addr_and_priv()"></div>
      </transition>



      
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="basic-addon1">Privkey:</span>
        </div>
        <input v-model="priv" type="text" class="form-control" placeholder="Privkey" aria-label="Privkey" aria-describedby="basic-addon1">
      </div>



      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="basic-addon1">Address:</span>
        </div>
        <input v-model="addr" readonly="readonly" type="text" class="form-control" placeholder="Address" aria-label="Address" aria-describedby="basic-addon1">
      </div>

      <div class="input-group mb-3" >
        <div class="input-group-prepend">
          <span class="input-group-text"  id="basic-addon1">PublicKey:</span>
        </div>
        <input v-model="pub" readonly="readonly" type="text" class="form-control" placeholder="PublicKey" aria-label="PublicKey" aria-describedby="basic-addon1">
      </div>

        <a  class="btn btn-info" target="_blank" href="http://v1.8btc.com/books/261/master_bitcoin/_book/4/4.html"><i class="fa fa-book" aria-hidden="true"></i> 比特币公私钥、地址生成过程</a>
        <a  class="btn btn-info" target="_blank" href="https://www.cnblogs.com/kumata/p/10591394.html"><i class="fa fa-book" aria-hidden="true"></i> 以太坊公私钥、地址生成过程</a>


    </div>
    
  </div><!-- /.row -->
  <br>
  <div class = "row">
    <div class="col-lg-8">
      <a class="no_type_a"><h3><i class="fa fa-flask"></i> 生成 Mock Data</h3></a>
      <br>
      <div class="form-group">
        <label class="control-label">选择你要模拟的数据类型：</label>
        <br>
          <div class="selectContainer">
            <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
              <select  v-model="mock_type" v-on:change="generate_mock_data(mock_type)" name="select-mock-type" class="form-control selectpicker" >
                {% for item in mock_data_type %}
                  <option value={{item}}>{{item}}</option>
                {% endfor %}
              </select>
            </div>
          </div>
          <br>
          <a class="btn btn-outline-secondary" v-on:click="generate_mock_data(mock_type)">Generate Another One!</a>
          <br>
          <br>
          
          <div class="input-group mb-3">
            <input v-model="mock_data" type="text" class="form-control" placeholder="Mock-Data" aria-label="Mock-Data" aria-describedby="basic-addon1">
          </div>

        </div>
   </div>
  </div><!-- /.row -->
  <br>
  <div class = "row">
    <div class="col-lg-8">
      <a class="no_type_a" target="_blank" data-tooltip="点击查看 API 文档" href="https://github.com/SUIBE-Blockchain/FISCO_BCOS_Toolbox/wiki/%E6%8E%A5%E5%8F%A3-v1.0#2-translate-signature"><h3><i class="fa fa-share"></i> 数据转换器</h3></a>
      <br>
      <div class="form-group">
        <label class="control-label">转换什么：</label>
        <br>
          <div class="selectContainer">
            <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
              <select  v-model="trans_type" v-on:change="translate_data(trans_type)" name="select-trans-type" class="form-control selectpicker" >
                {% for item in trans_type%}
                  <option value={{item}}>{{item}}</option>
                {% endfor %}
              </select>
            </div>
          </div>
          <br>
          <div class="input-group mb-3">
            <input v-model="trans_data" type="text" class="form-control" placeholder="Trans-Data" aria-label="Trans-Data" aria-describedby="basic-addon1">
          </div>
          <br>
          <a class="btn btn-outline-secondary" v-on:click="translate_data(trans_type,trans_data)">Translate!</a>
          <br>
          <br>

          <div v-if="trans_type=='signature'">
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon1">r :</span>
              </div>
              <input v-model="r" type="text" class="form-control" placeholder="r" aria-label="r" aria-describedby="basic-addon1">
            </div>
            
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon1">s:</span>
              </div>
            <input v-model="s" type="text" class="form-control" placeholder="s" aria-label="s" aria-describedby="basic-addon1">
            </div>

            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon1">v:</span>
              </div>
            <input v-model="v" type="text" class="form-control" placeholder="v" aria-label="v" aria-describedby="basic-addon1">
            </div>

            <a class="btn btn-info" target="_blank" href="https://mp.weixin.qq.com/mp/homepage?__biz=MzI0NTM0MzE5Mw==&hid=8&sn=82ca9c82b72fca9eaec924787a63e593"><i class="fa fa-book" aria-hidden="true"></i> 什么是r, s, v？</a>
          </div>

        </div>
   </div>
  </div><!-- /.row -->


  <br>
  <!-- up sdk config -->

<!-- down sdk config -->
  <div class="row">
    <div class="col-lg-8">
      <h3><i class="fa fa-edit"></i> 合约案例库</h3>
      <p>The Examples of Solidity on FISCO BCOS.</p>
      <p><a href="https://github.com/SUIBE-Blockchain/fisco_bcos_toolbox" class="btn btn-outline-secondary">开发中…… &raquo;</a></p>
    </div>
  </div>
</div>

</div>

<script>
  var context = new Vue({
    el: "#context",
    delimiters: ['${', '}'],
    data: 
    {
      keys:[],
      priv: "",
      pub:"",
      addr: "",
      priv_adding: "",
      addr_adding: "",
      key_type:"ethereum",
      mock_type: "byte32",
      mock_data: "0x7465737400000000000000000000000000000000000000000000000000000000",
      trans_type: "signature",
      trans_data: "",
      translated_data: new Object(),
      r: "",
      s: "",
      v: "",
    },
    methods:
    {
    heredoc: function(fn){
      return fn.toString().slice(13,-3);
    },
    download_txt: function(priv, addr) {
      var payload=context.heredoc(function(){/*{"address":"*/});
      payload+=addr;
      payload+=context.heredoc(function(){/*","privateKey":"*/});
      payload+=priv.slice(2);
      payload+=context.heredoc(function(){/*"}*/});

      var blob = new Blob([payload], {type: "text/plain;charset=utf-8"});
      saveAs(blob, addr+".txt");
    },
    btn_add_keys: function() {
      localStorage.setItem(context.priv_adding, context.addr_adding);
      context.keys.push({priv: context.priv_adding,addr: context.addr_adding})
    },
    btn_clear: function() {
      localStorage.clear();
      location.reload();
    },
    close_addr_and_priv: function(){
      this.$refs.area_box.style.left="inherit";
      this.$refs.mask.style.display="none";
    },
    show_addr_and_priv: function (){
      context.keys=[]
      for(var i=0; i<localStorage.length;i++){
        context.keys.push({"priv": localStorage.key(i), "addr": localStorage.getItem(localStorage.key(i))})
      }
      console.log(context.keys);
      this.$refs.area_box.style.left="50%";
      this.$refs.mask.style.display="inline-block";
    },
    change_key_type:function (key_type){
        if (key_type == "ethereum") {
            IsBitcoin=false
            console.log(IsBitcoin)
        }else{
            IsBitcoin=true
            console.log(IsBitcoin)
        }
    }   ,
    get_addr:function(key_type) {
        if (key_type == "ethereum") {

        axios(
            {
                method: 'get',
                url: '/api/v1/generate_addr',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                }
            })
            .then(function (response) {

                context.priv = response.data.payload.priv;
                context.addr = response.data.payload.addr;
                context.pub = response.data.payload.pub;
                localStorage.setItem(context.priv, context.addr);


            })
            .catch(function (error) {
            })

        }
        else {
            axios(
            {
                method: 'get',
                url: '/api/v1/generate_btcAddr',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                }
            })
            .then(function (response) {

                context.priv = response.data.payload.priv;
                context.addr = response.data.payload.addr;
                context.pub = response.data.payload.pub;
                localStorage.setItem(context.priv, context.addr);


            })
            .catch(function (error) {
            })
        }
      },
    get_addr_by_priv:function(priv,key_type)
    {
        if(key_type=="ethereum") {
            axios({
                method: 'post',
                url: 'api/v1/generate_addr',
                data:
                    {
                        priv: priv,
                    },
                headers:
                    {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    }
            })
                .then(function (response) {
                    context.priv = response.data.payload.priv;
                    context.addr = response.data.payload.addr;
                    context.pub = response.data.payload.pub;
                    console.log(context.pub)
                    localStorage.setItem(context.priv, context.addr);


                })
                .catch(function (error) {
                    console.log(error)
                })
        }
        else{
            axios(
            {
                method: 'post',
                url: '/api/v1/generate_btcAddr',
                data:
                    {
                        priv: priv,
                    },
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                }
            })
            .then(function (response) {

                context.priv = response.data.payload.priv;
                context.addr = response.data.payload.addr;
                context.pub = response.data.payload.pub;
                localStorage.setItem(context.priv, context.addr);


            })
            .catch(function (error) {
            })
        }
    },
    
    get_sdk_config_w3:function(
      crypto_type,
      contract_info_file,
      account_keyfile_path,
      logdir,
      account_keyfile,
      account_password,
      gm_account_keyfile,
      gm_account_password,
      fiscoChainId,
      groupid,
      client_protocol,
      remote_rpcurl,
      channel_host,
      channel_port,
      channel_ca,
      channel_node_cert,
      channel_node_key,
      solc_path,
      gm_solc_path,
      solcjs_path,
    )
    {
        const link = document.createElement('a')
        axios({
            method:'post',
            url:'api/v1/get_sdk_config',
            data:
            {
              'crypto_type':crypto_type,
              'contract_info_file':contract_info_file,
              account_keyfile_path:account_keyfile_path,
              logdir:logdir,
              account_keyfile:account_keyfile,
              account_password:account_password,
              gm_account_keyfile:gm_account_keyfile,
              gm_account_password:gm_account_password,
              fiscoChainId:fiscoChainId,
              groupid:groupid,
              client_protocol:client_protocol,
              remote_rpcurl:remote_rpcurl,
              channel_host:channel_host,
              channel_port:channel_port,
              channel_ca:channel_ca,
              channel_node_cert:channel_node_cert,
              channel_node_key:channel_node_key,
              solc_path:solc_path,
              gm_solc_path:gm_solc_path,
              solcjs_path:solcjs_path,
            },
            headers:
            {
                'Content-Type': 'application/x-www-form-urlencoded',
            }                             
        })
        .then(function(response){
          console.log('[+]oh is ok!')
          let blob = new Blob([response.data], {type: "application/x-www-form-urlencoded"});  // res就是接口返回的文件流了
          let objectUrl = URL.createObjectURL(blob); 
          link.href=objectUrl
          link.download='client_config.py'
          link.click()
          // window.location.href = objectUrl; 
        })
        .catch(function(error){
          console.log(error)
        })
    },
    translate_sig:function(sig){
      axios({
            method:'post',
            url:'api/v1/translate_sig',
            data:
            {
                sig: sig,
            },
            headers:
            {
                'Content-Type': 'application/x-www-form-urlencoded',
            }                             
        })
        .then(function(response){
          result = response.data.payload
          context.r = result["r"]
          context.s = result["s"]
          context.v = result["v"]
        })
        .catch(function(error){
          console.log(error)
        })      
    },  
    generate_mock_data:function(mock_type){
      if(mock_type=="byte32"){

        axios({
          method:'get',
          url:'/api/v1/random_bytes32',

          headers:
                  {
                    'Content-Type': 'application/x-www-form-urlencoded',
                  }
        })
                .then(function(response){
                  context.mock_data=response.data.message

                })
                .catch(function(error){
                  console.log(error)
                })
      }
      else if(mock_type=="int"){
        axios({
          method:'get',
          url:'/api/v1/random_int',

          headers:
                  {
                    'Content-Type': 'application/x-www-form-urlencoded',
                  }
        })
                .then(function(response){
                  context.mock_data=response.data.message

                })
                .catch(function(error){
                  console.log(error)
                })
      }
      else if(mock_type=="bytes"){
        axios({
          method:'get',
          url:'/api/v1/random_bytes',

          headers:
                  {
                    'Content-Type': 'application/x-www-form-urlencoded',
                  }
        })
                .then(function(response){
                  context.mock_data=response.data.message

                })
                .catch(function(error){
                  console.log(error)
                })

      }
    },
    translate_data: function(trans_type, trans_data){
      if(trans_type=="signature"){
        context.translate_sig(trans_data)
      }
    },
    get_sdk_config: function(){
        context.get_sdk_config_w3(
          window.crypto_type.value,
          window.contract_info_file.value,
          window.account_keyfile_path.value,
          window.logdir.value,
          window.account_keyfile.value,
          window.account_password.value,
          window.gm_account_keyfile.value,
          window.gm_account_password.value,
          window.fiscoChainId.value,
          window.groupid.value,
          window.client_protocol.value,
          window.remote_rpcurl.value,
          window.channel_host.value,
          window.channel_port.value,
          window.channel_ca.value,
          window.channel_node_cert.value,
          window.channel_node_key.value,
          window.solc_path.value,
          window.gm_solc_path.value,
          window.solcjs_path.value,
        )
    },
    }

  })
</script>
{% endblock %}

